<template>
	<view class="detail">
		<view class="profile flex position-relative p-20 py-40 text-white mb-20">
			<view class="image mr-20">
				<image class="avatar" src="http://vedio.ukulemon.com.cn/static/images/doctorDetails/portiat.png">
				</image>
			</view>
			<view class="info flex flex-column justify-between font-small">
				<view class="intro">
					<text class="name mr-20 font">{{detail.doctorName}}</text>
					<text class="position">{{detail.title}}</text>
				</view>
				<view class="hospital">医院名字</view>
				<view class="recommend flex">
					<PsySvg src="/static/detail/column.svg" text="精品栏目" class="mr-10" />
					<PsySvg src="/static/detail/article.svg" width="25rpx" text="科普文章" />
				</view>
			</view>
			<view class="qrCode">
				<image src="/static/detail/qrCode.svg" mode="widthFix" style="width: 50rpx"></image>
			</view>
		</view>
		<view>
			<PsyTabs :tabs="doctorTabs" @change="doctorTabsChange">
				<view v-show="doctorTabsIndex == 0"> {{detail.expertise}} </view>
				<view v-show="doctorTabsIndex == 1"> {{detail.description}} </view>
			</PsyTabs>
		</view>
		<topTitle bannerWord="精品栏目" rightText="" />
		<view style="text-align: center;" class="mt-20">
			该医生暂无精品视频
		</view>
	</view>
</template>

<script>
	import {
		requireEnums
	} from '../detail'
	import topTitle from '@/components/common/title.vue'
	import {
		doctorInfoDetail
	} from "@/common/api/detail/detail.js"
	export default {
		components: {
			topTitle
		},
		data() {
			return {
				doctorTabs: requireEnums.doctorTabs,
				doctorTabsIndex: 0,
				doctorId: '',
				detail: {}
			}
		},
		computed: {},
		methods: {
			doctorTabsChange(index) {
				this.doctorTabsIndex = index
			},
			doctorInfoDetailFn(id) {
				doctorInfoDetail({
					id
				}).then((res) => {
					this.detail = res
				}).catch((err) => {

				})
			}
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {

			// options 是传递过来的参数对象
			this.doctorId = options.id; // 获取 id 参数
			this.doctorInfoDetailFn(this.doctorId)

		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="less">
	.profile {
		height: 200rpx;
		background: linear-gradient(to right, #ff576c, #ff9900);

		.avatar {
			width: 100rpx;
			height: 100%;
		}

		.info {
			.hospital {
				color: rgba(254, 254, 254, 0.7);
			}
		}

		.qrCode {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
</style>